<template>
	<div class="developer">

		<div class="developer-menu">
			<div class="scroll-bar">
				<div class="menu-container">
					<g-menu-item 
						class="menu-item"
						:data="menuList"
						:selected="selected"
						:key="menuList.name"
						@on-select="switchItem" ></g-menu-item>
				</div>
			</div>
		</div>

		<div class="right-content">
			<g-scrollbar class="project-vertical-scroll">

				<div class="router-view-container">
					<keep-alive>
						<router-view></router-view>
					</keep-alive>
				</div>

			</g-scrollbar>
		</div>

	</div>
</template>

<script>

	import Bus from '@/utils/event_bus'
	import GMenuItem from '@/components/common/g-menu-item'
	import GScrollbar from '@/components/common/g-scrollbar'

	export default{
		name: 'develop',
		
		data (){
			return {
				menuList: {
					name: '开发管理',
					submenu: [
						{
							name: '秘钥管理',
							key: 'key',
							icon:'ak',
						},
						{
							name: '开发文档',
							link: '/sdk/',
							key: 'doc',
							icon:'file',
						},
					],
				},
				selected: '',
			}
		},
		
		components: {
			GMenuItem,
			GScrollbar
		},

		activated () {
	        this.$emit( 'on-view-load' );
	    },

	    mounted () {
	    	this.switchItem('key');
			Bus.$emit('on-submenu-change', '秘钥管理');
	    },

		methods: {

			switchItem (key) {

				if ( key === this.selected ) return;
	            
	            this.selected = key;
	            this.$router.push({name: key});

			}

		}
	}

</script>

<style lang="scss">
	
	@import 'common';

	.developer {

		height: 100%;

		.developer-menu{
			float:left;
			height: 100%;
			width: 180px;
			overflow: hidden;

			.scroll-bar {

				height: 100%;
				overflow-y: scroll;
				overflow-x: hidden;
				margin-right: -15px;
				position: relative;

				.menu-container {

					border-right: 1px solid #ccc;
					min-height: 100%;
					padding-bottom: 12px;
					width: 180px;

					.menu-item {
						margin-right: -1px;
					}
				}
			}
			
		}

		.right-content{
			left: 180px;
			height: 100%;
			overflow: hidden;

			.project-vertical-scroll {
				height: 100%;
			}

			.router-view-container {
				padding: 40px;
				overflow: hidden;
			}
		}
	}

</style>